<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>月账单统计</title>

    <!--<div th:replace="head"></div>
    <link rel="stylesheet" href="/static/css/dataTables.bootstrap.css"/>-->
    <th:block th:include="include :: header('bootstrap')" />
    <script type="text/javascript" th:src="@{/static/js/My97DatePicker/WdatePicker.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/My97DatePicker/lang/zh-cn.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/jquery/jquery-1.10.2.min.js}"></script>
    
</head>

<!--<script th:src="@{/static/js/jquery.min.js}"></script>-->
<body class="container">

<div class="with:80%" style="margin-left: 150px;">
    <form class="form-inline" action="" id="detail" method="get">
        <div class="form-group">
            <label for="date1" class="control-label">查询时间</label>&nbsp;
            <input type="text" class="form-control" onchange="change()" name="date" id="date1" placeholder="yyyy-MM" th:value="${date}"
                   onclick="WdatePicker()"/>&nbsp;
        </div>
        <div class="form-group">
            <input type="submit" value="查询" class="btn btn-info"/>
            &nbsp; &nbsp;
            <button id="reset" class="btn btn-info">重置</button>
            &nbsp; &nbsp;
        </div>
    </form>
</div>
<br/>
<div>
    <button id="index"  onclick="index()" class="btn btn-info">返回首页</button>
</div>


<div class="with:80%">

    <table id="dataTable" class="table table-bordered table-striped">
        <thead>
        <tr>
            <th style="text-align: center">记录ID</th>
            <th style="text-align: center">用户</th>
            <th style="text-align: center">日期</th>
            <th style="text-align: center">消费</th>
            <th style="text-align: center">保险</th>
            <th style="text-align: center">贷款</th>
            <th style="text-align: center">消费百分比</th>
            <th style="text-align: center">保险占比</th>
            <th style="text-align: center">贷款占比</th>
            <th style="text-align: center">余额收益</th>
            <th style="text-align: center">股票收益</th>
            <th style="text-align: center">基金收益</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="monthBill : ${queryMonthBill.getResults()}">
            <td style="text-align: center" th:text="${monthBill.taskId}"></td>
            <td style="text-align: center" th:text="${monthBill.customerId}">label</td>
            <td style="text-align: center" th:text="${monthBill.month}">label</td>
            <td style="text-align: center;color: #FF0000" th:text="${monthBill.lifeConsume}">label</td>
            <td style="text-align: center;color: #FF0000" th:text="${monthBill.insurance}"></td>
            <td style="text-align: center;color: #FF0000" th:text="${monthBill.loan}"></td>
            <td style="text-align: center;color: #008CBA" th:text="${#numbers.formatDecimal(monthBill.consumePoint * 100 ,2 ,1)} +'%'"></td>
            <td style="text-align: center;color: #008CBA" th:text="${#numbers.formatDecimal(monthBill.insurancePoint * 100 ,2 ,1)} +'%'"></td>
            <td style="text-align: center;color: #008CBA" th:text="${#numbers.formatDecimal(monthBill.loanPoint * 100 ,2 ,1)} +'%'"></td>
            <td style="text-align: center;color: #4bee00" th:text="${monthBill.balanceYield}"></td>
            <td style="text-align: center;color: #4bee00" th:if="${monthBill.stockYield} >= 0.00" th:text="${monthBill.stockYield}">label</td>
            <td style="text-align: center;color: #FF0000" th:if="${monthBill.stockYield} < 0" th:text="${monthBill.stockYield}">label</td>
            <td style="text-align: center;color: #4bee00" th:if="${monthBill.fundYield} >= 0.00" th:text="${monthBill.fundYield}">label</td>
            <td style="text-align: center;color: #FF0000" th:if="${monthBill.fundYield} < 0" th:text="${monthBill.fundYield}">label</td>
        </tr>
        </tbody>
    </table>

    <div class="modal-footer no-margin-top">
            <!-- 处理页数小于等于7 的情况 -->
            <ul th:if="${(queryMonthBill.getPaging().getTotalPages() lt 7) && (queryMonthBill.getPaging().getTotalPages() ge 0)}"
                class="pagination pull-right no-margin">
                <li th:each="pageNum:${#numbers.sequence(0, queryMonthBill.getPaging().getTotalPages() - 1)}">
                    <a th:href="'/bill/to/statistics?currentPage=' + ${pageNum}"  th:text="${pageNum + 1}"
                       th:if="${pageNum ne queryMonthBill.getPaging().getCurrentPage()}">
                    </a>
                    <a th:href="'/bill/to/statistics?currentPage=' + ${pageNum}" th:text="${pageNum + 1}"
                       th:if="${pageNum eq queryMonthBill.getPaging().getCurrentPage()}"
                       th:style="'font-weight:bold;background: #6faed9;'"></a>
                </li>
            </ul>
            <ul th:if="${(queryMonthBill.getPaging().getTotalPages() ge 7)}"class="pagination pull-right no-margin">

                <!-- 首页 -->
                <li th:if="${queryMonthBill.getPaging().getCurrentPage() ne 0}" >
                    <a th:href="'/bill/to/statistics?currentPage=0'">首页</a>
                </li>
                
                <!-- 上一页 -->
                <li th:if="${queryMonthBill.getPaging().getCurrentPage() gt 0}">
                    <a th:href="'/bill/to/statistics?currentPage=' + ${queryMonthBill.getPaging().getCurrentPage()-1}">上一页</a>
                </li>

                

                <!-- 当前页面小于等于4 -->
                <li th:if="${queryMonthBill.getPaging().getCurrentPage() le 4}" 
                    th:each="pageNum:${#numbers.sequence(0,4)}">
                    <a th:href="'/bill/to/statistics?currentPage='+ ${pageNum}" th:text="${pageNum + 1}"
                       th:if="${pageNum ne queryMonthBill.getPaging().getCurrentPage()}">
                    </a>
                    <a th:href="'/bill/to/statistics?currentPage='+ ${pageNum}" th:text="${pageNum + 1}"
                       th:if="${pageNum eq queryMonthBill.getPaging().getCurrentPage()}"
                       th:style="'font-weight:bold;background: #6faed9;'">
                    </a>
                </li>
                <li th:if="${queryMonthBill.getPaging().getCurrentPage() le 4}">
                    <a th:href="'/bill/to/statistics?currentPage=5'">...</a>
                </li>

                <!-- 最后一页与当前页面之差小于等于3 -->
                <li th:if="${queryMonthBill.getPaging().getTotalPages()-queryMonthBill.getPaging().getCurrentPage() le 3}">
                    <a th:href="'/bill/to/statistics?currentPage=' + ${queryMonthBill.getPaging().getTotalPages() -5}">...</a>
                </li>
                <li th:if="${queryMonthBill.getPaging().getTotalPages()-queryMonthBill.getPaging().getCurrentPage() le 3}" 
                    th:each="pageNum:${#numbers.sequence(queryMonthBill.getPaging().getTotalPages()-4,
                            queryMonthBill.getPaging().getTotalPages()-1)}">
                    <a th:href="'/bill/to/statistics?currentPage='+ ${pageNum}" th:text="${pageNum + 1}"
                       th:if="${pageNum ne queryMonthBill.getPaging().getCurrentPage()}">
                    </a>
                    <a th:href="'/bill/to/statistics?currentPage='+ ${pageNum}" th:text="${pageNum + 1}"
                       th:if="${pageNum eq queryMonthBill.getPaging().getCurrentPage()}"
                       th:style="'font-weight:bold;background: #6faed9;'">
                    </a>
                </li>


                <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
                <li th:if="${(queryMonthBill.getPaging().getCurrentPage() gt 4) && 
                            (queryMonthBill.getPaging().getTotalPages()-queryMonthBill.getPaging().getCurrentPage() gt 3)}">
                    <a th:href="'/bill/to/statistics?currentPage=' + ${queryMonthBill.getPaging().getCurrentPage() -2}">...</a>
                </li>
                <li th:if="${(queryMonthBill.getPaging().getCurrentPage() gt 4) && 
                            (queryMonthBill.getPaging().getTotalPages()-queryMonthBill.getPaging().getCurrentPage() gt 3)}" 
                    th:each="pageNum:${#numbers.sequence(queryMonthBill.getPaging().getCurrentPage()-1,
                                queryMonthBill.getPaging().getCurrentPage()+1)}">
                    <a th:href="'/bill/to/statistics?currentPage=' + ${pageNum}" th:text="${pageNum + 1}"
                       th:if="${pageNum ne queryMonthBill.getPaging().getCurrentPage()}">
                    </a>
                    <a th:href="'/bill/to/statistics?currentPage=' + ${pageNum}" th:text="${pageNum + 1}"
                       th:if="${pageNum eq queryMonthBill.getPaging().getCurrentPage()}"
                       th:style="'font-weight:bold;background: #6faed9;'">
                    </a>
                </li>
                <li th:if="${(queryMonthBill.getPaging().getCurrentPage() gt 4) && 
                        (queryMonthBill.getPaging().getTotalPages()-queryMonthBill.getPaging().getCurrentPage() gt 3)}">
                    <a  th:href="'/bill/to/statistics?currentPage=' +${queryMonthBill.getPaging().getCurrentPage() + 2}">...</a>
                </li>

                <!-- 下一页 -->
                <li th:if="${queryMonthBill.getPaging().getCurrentPage() lt queryMonthBill.getPaging().getTotalPages() - 1}">
                    <a th:href="'/bill/to/statistics?currentPage=' + ${queryMonthBill.getPaging().getCurrentPage() + 1}">下一页</a>
                </li>
                
                <!-- 尾页 -->
                <li th:if="${queryMonthBill.getPaging().getCurrentPage() ne queryMonthBill.getPaging().getTotalPages()-1}">
                    <a th:href="'/bill/to/statistics?currentPage=' + ${queryMonthBill.getPaging().getTotalPages()-1}" >尾页</a>
                </li>

                

                <!--<div class="input-group" style="height: 38px;width: 150px;">
                    <input type="number" min="1" th:max="${queryMonthBill.getPaging().getTotalPages()}" 
                           th:value="${queryMonthBill.getPaging().getCurrentPage()}" 
                           class="form-control toPage">
                    <div class="input-group-append">
                        <button type="button" class="btn btn-primary toUrl">跳转</button>
                    </div>
                </div>-->
            </ul>
        </div>
    </div>
</div>


<script type="text/javascript">

    function index(){
        location.href="/bill/to/index";
    }
    
    function change(){
        var date = $('input[type=text]').val();
        var newDate = date.substring(0,7);
        $('input[type=text]').val(newDate);
    }
    $("#reset").click(function(){
        $(".form-inline input").each(function(){
            $(this).val('');
        });
        $(".form-inline select").each(function(){
            $(this).val('');
        });
    })
    
</script>

</body>
</html>
